<!DOCTYPE html>
<html>
	<head>
		<!-- gbk gb18030  gb2312  三种简体中文   字库的多少
		     big5   繁体中文
		     utf-8  国际化语言，支持所有的语言编码
		     默认最古老的语言编码是  ISO-8859-1   西欧语言编码
		     语言编码不需要区分大小写  所有utf-8  和 UTF-8   和  Utf-8  是一样的作用
		  -->
		<meta charset="utf-8" />
		<title>基线数据采集分析云平台</title>
		<link rel="stylesheet" type="text/css" href="login/css/index.css"/>
		<style type="text/css">
			/*body{
               background: url(img/4.jpg) no-repeat;
            }*/
		</style>
	</head>
	<script src="jquery/jquery-3.5.1.js"></script>
	<body>
		<div class="bg">
			<div class="wel">基线数据采集分析云平台</div>
	        <div class="user">
	       	    <div style="">用户名</div>

				<!--title 代表当前页面的标题
				input输入框 ，可以输入  明文内容，也可以输入密文内容
				type="text"  代表明文
				type="password"  代表密文
				-->

	       	    <input  type="text" name="用户"  placeholder="输入用户名" id="username" />
	        </div>
	        <div class="password">
	        	<div>密&nbsp;&nbsp;&nbsp;码</div>
	       	    <input class="" type="password" name="密码" id="password" />
	        </div>
	        <div class="rem" >
	       	  <input type="checkbox" name="" id="" value="" />
	        	 <div id="reb">
	        	 	记住密码
	        	 </div>
	        </div>
	        <div class="fg" >
	       	    <div style="font-size: 11px;margin-top: 11px;">
	       	    	<a style="font-size: 11px;" href="#">忘记密码？</a>
	       	    </div>
	        </div>
	        <input class="btn" type="button" id="loginButton" name="登录" value="登录" />
		</div>
	</body>

	<script>
		// $(function() ...)   这个头文件，代表等待整个页面加载完成，才激活对应js代码处理
		// $("#loginButton").click(function () {}   指定某一个按钮，绑定对应的鼠标左键点击事件   绑定指定的id值，这个值是自定义的
		// $("#username").val()   获取某一个id值为username的标记，得到用户的输入内容
		$(function () {                                              // 等待整个页面加载完毕时，才开始执行js代码
			console.log("hello world");
			$("#loginButton").click(function () {                    // 指定一个html标签，id为loginButton的控件，绑定一个鼠标左键单击事件
				var username = $("#username").val();                 // 获取id为yongHuMingCheng控件中，用户输入的内容
				var password = $("#password").val();                 // 获取id为miMa控件中，用户输入的内容

				// 在网络请求中，通常会使用两种请求行为，1.为get请求  2.为post请求
				// get请求，是我们通常称呼的明文式请求，不能做到网络安全
				// post请求，是我们通常称呼的隐藏式请求，不会直接的把传递的数据，暴露出来
				// 在数据库设计增删改查中，只有查询会走get请求，其余操作全部走post请求

				$.ajax({                                             // 异步请求   想象成线程状态
					url:"/shiro/login",                               // 请求路径   请求服务器的哪一个接口
					type:"post",                                     // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
					datatype:"text",
					// contentType: "application/json;charset=utf-8",   // 固定写法  http协议决定  代表请求方式，是传一个json对象给到后台服务接口中
					data:{                            // request中传递的key-value值
						username:username,
						password:password
					},
					success:function(response){                      // 后台服务响应成功，自动返回数据
						console.log(response);                       // 页面级的调试规则，可以输入到页面的控制台中
						if(response.code === 200) {                  // 获取到json数据中的一个key为code的value
							alert("登录成功!");                       // 弹出框  警告框
							window.location.href="index.html";
						}
						else {
							alert("登录失败，用户名或者密码错误!");
						}
					},
					error:function(response){                        // 网络请求失败，自动调用此方法
						console.log("出错" + response);
					}
				});
			});
		});
	</script>
</html>
